<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>素材中心</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item>素材中心</el-breadcrumb-item>
                    <el-breadcrumb-item>轮播图</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="resource-carousel" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <div class="page-main">
            <div class="admin-panel padding-20">
                <div style="margin: 10px 0">
                    <el-button size="small" type="primary" @click="showCarouselDialog">调整轮播图</el-button>
                </div>

                <el-table :data="carousel.list" border>
                    <el-table-column label="排序" prop="sort" width="80" align="center"></el-table-column>
                    <el-table-column label="图片" width="600">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.imageUrl" style="height: 150px; min-width: 360px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="背景色" min-width="80" align="center">
                        <template slot-scope="scope">
                            <div style="width: 50px; height: 30px; margin: auto" :style="{background: scope.row.bgColor}"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接" min-width="200">
                        <template slot-scope="scope">
                            <el-link :href="scope.row.link">{{scope.row.link}}</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <el-dialog title="调整轮播图" :visible.sync="editCarouselDialog.show" width="800px" :close-on-click-modal="false">
        <table width="100%">
            <tr>
                <th>排序</th>
                <th>轮播图</th>
                <th>背景色</th>
                <th>链接</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in editCarouselDialog.list">
                <td align="center">{{index + 1}}</td>
                <td align="center">
                    <el-select v-model="item.imageUrl"
                               placeholder="选择图片（需要提前在素材中心中上传）"
                               style="width: 100%">
                        <el-option
                                v-for="option in editCarouselDialog.images"
                                :key="option.id"
                                :label="option.name"
                                :value="option.url">
                            <div style="display: flex; justify-content: space-between">
                                <image :src="option.url" style="height: 80px;"></image>
                            </div>
                        </el-option>
                    </el-select>
                </td>
                <td align="center"><el-color-picker v-model="item.bgColor"></el-color-picker></td>
                <td align="center"><el-input style="width: 100%" v-model="item.link" placeholder="链接到" :maxlength="100"></el-input></td>
                <td align="center">
                    <el-link style="padding: 0 5px;" :underline="false" @click="sortCarousel(index, 'up')" :disabled="index === 0"><i class="el-icon-top"></i></el-link>
                    <el-link style="padding: 0 5px;" :underline="false" @click="sortCarousel(index, 'down')" :disabled="index === editCarouselDialog.list.length - 1"><i class="el-icon-bottom"></i></el-link>
                    <el-link style="padding: 0 5px;" :underline="false" @click="editCarouselDialog.list.splice(index,1)"><i class="el-icon-delete"></i></el-link>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <el-link type="primary" :underline="false" @click="editCarouselDialog.list.push({image:null, bgColor:null, link: null})" v-if="editCarouselDialog.list.length < 5">添加轮播图</el-link>
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="editCarouselDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveCarousel">确 定</el-button>
        </span>
    </el-dialog>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            carousel: {
                list:[]
            },
            editCarouselDialog: {
                show: false,
                list: [],
                images: []
            }
        },
        methods: {
            loadCarousel: function () {
                let vue = this;

                let url = '/resource/carousel';
                axios.get(url).then(resp => {
                    vue.carousel.list = resp.data || [];
                });
            },
            showCarouselDialog: function () {
                let vue = this;
                vue.editCarouselDialog.show = true;
                vue.editCarouselDialog.list = JSON.parse(JSON.stringify(vue.carousel.list));

                axios.get('/admin/resource/image').then(resp => {
                    vue.editCarouselDialog.images = resp.data || [];
                });
            },
            sortCarousel: function (index, direction) {
                let vue = this;

                if (direction === 'up') {
                    if (index > 0) {
                        let temp = vue.editCarouselDialog.list[index - 1];
                        vue.editCarouselDialog.list[index - 1] = vue.editCarouselDialog.list[index];
                        vue.editCarouselDialog.list[index] = temp;
                    }
                } else {
                    if (index < vue.editCarouselDialog.list.length - 1) {
                        let temp = vue.editCarouselDialog.list[index + 1];
                        vue.editCarouselDialog.list[index + 1] = vue.editCarouselDialog.list[index];
                        vue.editCarouselDialog.list[index] = temp;
                    }
                }

                vue.editCarouselDialog.list = JSON.parse(JSON.stringify(vue.editCarouselDialog.list)) ;
            },
            saveCarousel: function () {
                let vue = this;

                for (let i = 0; i < vue.editCarouselDialog.list.length; i++) {
                    vue.editCarouselDialog.list[i].sort = i + 1;
                }

                axios.post('/admin/resource/carousel', vue.editCarouselDialog.list).then(resp => {
                    vue.editCarouselDialog.show = false;
                    vue.loadCarousel();
                });
            }
        },
        mounted: function () {
            this.loadCarousel();
        }
    })
</script>
</html>